<template>
  <Suspense>
    <main class="relative group">
      <section>
        <SettingIcon
          theme="outline"
          size="24"
          class="icon z-50"
          v-if="config.page == 'camera'"
          @click="config.page = 'setting'"
        />
        <camera-five
          theme="outline"
          size="24"
          class="icon"
          v-if="config.page == 'setting'"
          @click="config.page = 'camera'"
        />
        <inner-shadow-bottom-right
          theme="outline"
          size="24"
          class="icon bottom-3 z-50"
          v-if="config.page == 'camera'"
          @click="config.rounded = !config.rounded"
        />
      </section>
      <section>
        <Camera v-if="config.page == 'camera'" />
        <Setting v-else />
      </section>
    </main>
  </Suspense>
</template>

<script setup lang="ts">
import Camera from './components/Camera.vue'
import Setting from './components/Setting.vue'
import { bindDragEvent } from 'electron-drag-window/renderer'
import { Setting as SettingIcon } from '@icon-park/vue-next'
import { CameraFive } from '@icon-park/vue-next'
import { InnerShadowBottomRight } from '@icon-park/vue-next'
import { useConfigStore } from './stores'
import { storeToRefs } from 'pinia'

const { config } = storeToRefs(useConfigStore())

const sendToMain = (channel: string, ...args: any[]) => {
  window.electron.ipcRenderer.send(channel, ...args)
}
bindDragEvent(sendToMain)
</script>

<style lang="scss" scoped>
.icon {
  @apply absolute left-1/2 -translate-x-1/2 text-white opacity-80 mt-3 cursor-pointer hidden group-hover:block;
}
</style>
